<template>
	<!-- 营地住宿首页 -->
	<view>
		<nav-bar title="悦客房车">
			<view slot="right" class="search_box" @click="addressShow = true"></view>
			<view slot="right" class="address_select" @click="addressShow = true">{{city}}</view>
		</nav-bar>
		<!-- 设置圆角 -->
		<view>
			<uni-search-bar :radius="100" placeholder="输入您想查询的全国营地" cancelButton="none" v-model="searchtext" @confirm="search"></uni-search-bar>
		</view>
		<pickerAddress v-model="addressShow" @confirm="addresspick" />
		<view class="title">
			<view @click="showCamp">
				<text>营地列表</text>
			</view>
			<view>
				<navigator url="/pages/camp_map/camp_map">
					<text>营地地图</text>
				</navigator>
			</view>
		</view>
		<view>
			<!-- <uni-list>
				<uni-card v-for="camp in camps" :title="camp.campName" mode="style" :is-shadow="true" :thumbnail="camp.url"
				 :extra="camp.campName" :note="camp.introduce">
				</uni-card>
			</uni-list> -->
			<!-- 营地列表展示 -->
			<view v-for="camp in camps" class="camps" @click="campdetail(camp.campId)">
				<view>
					<image :src="camp.url" class="img"></image>
				</view>
				<view class="camp_title">
					<!-- <view> -->
					<text>{{camp.campName}}</text>
					<!-- </view> -->
					<view class="title_right">
						<text class="icon">&#xe8c1; <text class="icon_title">直播&nbsp;| &nbsp;</text></text>
						<text class="icon"> &nbsp; &#xe8bc; <text class="icon_title">&nbsp;收藏&nbsp;</text></text>
					</view>
				</view>
				<view class="introduce">
					<text>{{camp.introduce}}</text>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	//引入搜索框
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	//三级联动地址
	import pickerAddress from '@/components/liudx-pickerAddress/index.vue'
	export default {
		components: {
			uniSearchBar,
			pickerAddress
		},
		data() {
			return {
				camps: [],
				searchtext: '',
				city: '重庆',
				addressShow: false,
				form: {
					province: '',
					city: '',
					area: '',
				},
				address: ''
			}
		},
		onLoad: function(options) {
			this.city = options.address;
			this.showCamp();
		},
		//页面触底事件
		onReachBottom() {
			console.log("触底了")
		},
		methods: {
			//搜索的方法
			search: function() {
				//获取输入框的值
				console.log(this.searchtext.value);
				uni.request({
					url: this.webUrl+'camp/selectbyExample?name=' + this.searchtext.value+'&cityName='+this.city,
					success: (res) => {
						console.log(res.data.list)
						this.camps = res.data.list;
					}
				});
			},
			//根据营地id跳转营地详情页
			campdetail: function(campId) {
				uni.navigateTo({
					url: "/pages/camp_detail/camp_detail?campId=" + campId
				})
			},
			//页面加载的方法
			showCamp: function() {
				uni.request({
					url: this.webUrl+'camp/selectbyExample',
					success: (res) => {
						console.log(res.data.list)
						this.camps = res.data.list;
					}
				});
			},
			//地址选择
			addresspick(obj) {
				let arr = [ 'province', 'city', 'area'];
				let place = '';
				let i =1;
				arr.map(key => {
					this.form[key] = obj[key].AreaId
					if(i==1){
						this.city = obj[key].AreaName;
						i=2;
					}
					place += obj[key].AreaName
				})
				this.address = place;
			}
		},
		components: {
			pickerAddress
		},
		watch:{
			'city':function(){
				uni.request({
					url: this.webUrl+'camp/selectbyExample?name=' + this.searchtext.value+'&cityName='+this.city,
					success: (res) => {
						console.log(res.data.list)
						this.camps = res.data.list;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	/* 顶部菜单栏 */
	.search_box {
		width: 35upx;
		height: 35upx;
		background-image: url('/static/icon_location.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-right: 15upx;
	}

	.address_select {
		margin-right: 15rpx;
		font-size: 30rpx;
	}

	.title {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		width: 100%;
		height: 80rpx;
		background-color: #464646;
		line-height: 80rpx;
		font-size: 30rpx;
		color: white;
		margin-bottom: 10rpx;
	}

	/* 营地展示栏 */
	.camps {
		width: 95%;
		height: 650rpx;
		font-size: 30rpx;
		margin: 0 auto;
		margin-bottom: 10rpx;
		background-color: #F0F0F0;
		border-radius: 20rpx;

		.img {
			display: block;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			width: 100%;
			margin-bottom: 5rpx;
		}

		.camp_title {
			margin-left: 15rpx;
			margin-right: 15rpx;

			.title_right {
				margin-right: 20rpx;
				font-size: 30rpx;
				float: right;

				.icon {
					font-size: 40rpx;
					color: #888888;
					margin-left: 5rpx;

					.icon_title {
						color: #333333;
						font-size: 27rpx;
					}
				}
			}
		}

		.introduce {
			display: flex;
			font-size: 28rpx;
			color: #888888;
			line-height: 40rpx;
			height: 75rpx;
			background-color: #F0F0F0;
			overflow: hidden;
			margin-top: 10rpx;
			margin-left: 15rpx;
			margin-right: 15rpx;
		}
	}
</style>
